<%--
  Created by IntelliJ IDEA.
  User: 天青烟雨
  Date: 2020/9/21
  Time: 21:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ include file="commons/header.jsp"%>
<table class="table table-hover table-bordered table-striped" id="dataTable">
    <thead>
    <tr>
        <th>ID</th>
        <th>管理员</th>
        <th>密码</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="users">
       <tr v-for ="u in Sys_User" >
        <td>{{u.id}}</td>
        <td>{{u.sname}}</td>
        <td>{{u.password}}</td>

        <td>
            <button class="btn btn-xs btn-danger" onclick="deleteUser(this)" :uid="u.id"><i class="fa fa-remove"></i> 删除</button>
            <button class="btn btn-xs btn-primary"  onclick="addUser()"><i class="fa fa-edit"></i> 增加</button>
            <button class="btn btn-xs btn-primary" onclick="getUser(this)":uid="u.id"><i class="fa fa-edit"></i> 查看</button>

        </td>
    </tr>


    </tbody>
</table>

<div class="modal" id="addGoodsModal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button onclick="destoryAddGoodsModal()" class="close">
                    <span>&times;</span>
                </button>
                <h3 class="modal-title">添加管理员</h3>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="imageServerPath">
                    <div class="form-group">
                        <label for="name">管理员名字</label>
                        <input class="form-control" autocomplete="off" id="name">
                    </div>

                    <div class="form-group">
                        <label for="password">管理员密码</label>
                        <input class="form-control" autocomplete="off" id="password">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button onclick="destoryAddGoodsModal()" class="btn btn-danger">取消</button>
                <button class="btn btn-success" onclick="addManagers()">确认</button>
            </div>
        </div>
    </div>
</div>
<%--查看页面--%>
<div class="modal" id="getUserModal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button onclick="destoryGetUserModal()" class="close">
                    <span>&times;</span>
                </button>
                <h3 class="modal-title">管理员详细信息</h3>
            </div>
            <div class="modal-body">
                <form>
                    <%--                    <input type="hidden" id="imageServerPath">--%>
                    <div class="form-group">
                        <label for="name">管理员名字</label>
                        <input class="form-control" autocomplete="off" id="Sys_UserName">
                    </div>

                    <div class="form-group">
                        <label for="password">管理员密码</label>
                        <input class="form-control" autocomplete="off" id="Sys_UserPassword">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button onclick="destoryGetUserModal()" class="btn btn-danger">返回</button>
            </div>
        </div>
    </div>
</div>

<script>

    // 隐藏模态框
    function destoryAddGoodsModal() {

        $('#addGoodsModal').modal('hide');
    }
    var vm = new Vue({
        el:'#dataTable',
        data:{
            Sys_User:[]
        }
    })
    
   function getPage(){
        vm.Sys_User=[];
       $.ajax({
           url: '${pageContext.servletContext.contextPath}/sys_user',
           type:'get',
           dataType:'json',
           data:{method:'getAllSys_user'},
           success:function (_data) {
               for(var i = 0; i < _data.length; i++) {
                   vm. Sys_User.push(_data[i])
               }
           }
       })

   }

   getPage()

    // 隐藏查看模态框
    function destoryGetUserModal() {

        $('#getUserModal').modal('hide');
    }

    // 隐藏查看模态框
    function destoryGetUserModal() {

        $('#getUserModal').modal('hide');
    }

    //查看管理员
    function getUser(a) {
        var userId = $(a).attr('uid');

        $.ajax({
            url: '${pageContext.servletContext.contextPath}/sys_user',
            type: 'get',
            dataType: 'json',
            data: {method: "getUser",userId: userId },
            success: function (_data) {
                if (_data.code != 0) {
                    $('#getUserModal').modal('show');
                    $('#Sys_UserName').val(_data.sname);
                    $('#Sys_UserPassword').val(_data.password)
                }else{
                    confirm("查看失败");
                }

            }
        })
    }


function addManagers() {
    var name = $('#name').val();
    var password = $('#password').val();

    $.ajax({
        url: '${pageContext.servletContext.contextPath}/sys_user',
        type:'get',
        dataType:'json',
        data:{method:'addSys_user',name:name,password:password},
        success:function (_data) {
            if(_data.code == 1) {
                getPage()
                destoryAddGoodsModal()
            }else {
                alert("添加失败")
            }
        }
    })


}
function addUser() {
    $('#addGoodsModal').modal('show');
}

function deleteUser(obj) {
    var userId = $(obj).attr('uid');
    if(confirm("确定要删用户id【" + userId + "】的数据?")) {

        $.ajax({
            //url: 'http://localhost:8080/sys_user',
            url: '${pageContext.servletContext.contextPath}/sys_user',
            type: 'get',
            dataType: 'json',
            data: {userId: userId, method: 'deleteSys_user'},
            success: function(_data) {
                //_data = {code: 1, msg: 'success'}
                if(_data.code == 1) {
                    alert("删除成功")
                    getPage()
                }else {
                    alert("删除失败")
                }

            }
        })
        // http://localhost:8080/webproject_day3_war_exploded/user?method=delete
        // 因为jsp页面和servlet在同一个项目中，所以项目的url地址可以省略。
        // location.href = "url" 意思就是请求对应的url地址。

    }


}

</script>
<%@ include file="commons/footer.jsp"%>